<template>
  <page-header-wrapper :title="false">
    <a-card title="账户详情">
      <template #extra> <a-button type="primary" @click="handleEdit(info)">编辑会员</a-button></template>
      <a-descriptions bordered title="" size="small">
        <a-descriptions-item label="会员名称" :span="3"> {{ info?.name }} </a-descriptions-item>
        <a-descriptions-item label="会员电话" :span="3">{{ info?.phone }}</a-descriptions-item>
        <a-descriptions-item label="会员卡号" :span="3"> {{ info?.cardNo }} </a-descriptions-item>
        <a-descriptions-item label="会员等级" :span="3">  {{ info?.level == '0' ? '普卡' :'VIP' }}</a-descriptions-item>
        <a-descriptions-item label="预付款" :span="3">    <a @click="handlePrepayment()">{{ info?.prepayment }}元  ></a></a-descriptions-item>
        <a-descriptions-item label="当前积分" :span="3"> {{ info?.bigintegral || 0 }} </a-descriptions-item>
        <a-descriptions-item label="累计积分" :span="3"> {{ info.hisBigintegral }} </a-descriptions-item>
        <a-descriptions-item label="标签" :span="3">
          <span>{{
            info?.memLabelList?.map((item) => {
                return item.name
              })
              .toString()
          }}</span>
          <a-button type="primary" style="margin: 0px 5px" @click="handleMark(info)">编辑</a-button>
        </a-descriptions-item>
        <a-descriptions-item label="加入日期" :span="3"> {{ info?.joinDate }} </a-descriptions-item>
        <a-descriptions-item label="身份证号" :span="3"> {{ info?.idCardNo }} </a-descriptions-item>
        <a-descriptions-item label="年龄" :span="3">{{
          info?.idCardNo && info?.birthday ? info?.idCardNo ? this.getAge(String(info?.idCardNo)) : this.betBirthAge(String(info?.birthday)) : '无'
        }}</a-descriptions-item>
        <a-descriptions-item label="生日" :span="3">
          {{ info?.idCardNo && info?.birthday ? info?.birthday ? this.getBirth(info?.birthday) : this.getIDcardBirth(info?.idCardNo) :'无' }}
        </a-descriptions-item>
        <a-descriptions-item label="性别" :span="3"> {{ info?.sex == 1 ? '男' : '女' }} </a-descriptions-item>
        <a-descriptions-item label="销售负责人" :span="3"> {{ info?.empName }} </a-descriptions-item>
        <a-descriptions-item label="微信绑定" :span="3">
          <a-tag color="#82af6f" v-if="1">已绑定</a-tag>
          <a-tag color="#abbac3" v-else>未绑定</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="关注公众号" :span="3">
          <a-tag color="#82af6f" v-if="info?.isCare === '1'">已关注</a-tag>
          <a-tag color="#abbac3" v-else>未关注</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="微信会员卡" :span="3">
          <a-tag color="#82af6f" v-if="1">已领卡</a-tag>
          <a-tag color="#abbac3" v-else>未领卡</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="状态" :span="3">
          <a-tag color="#82af6f" v-if="info?.activeStatus == '1'">已激活</a-tag>
          <a-tag color="#abbac3" v-else>未激活</a-tag>
          <a-button type="primary" style="margin: 0px 5px" @click="handleChange()">切换</a-button>
        </a-descriptions-item>
        <!-- <a-descriptions-item label="操作" :span="3">
          <div style="display:flex;">
            <a-button type="primary" style="margin:0px 5px">同步积分</a-button>
            <a-button type="danger" style="margin-right:5px" @click="handleMerge()">合并会员</a-button>
          </div>
        </a-descriptions-item> -->
        <a-descriptions-item label="积分记录" :span="3">
          <a @click="routeToIntegral()">查看详情 ></a>
        </a-descriptions-item>
        <a-descriptions-item label="跟进记录" :span="3">
          <a @click="routeToFollow()">查看详情 ></a>
        </a-descriptions-item>
        <a-descriptions-item label="待办记录" :span="3">
          <a @click="routeToTodo()">查看详情 ></a>
        </a-descriptions-item>
        <a-descriptions-item label="订单记录" :span="3">
          <a @click="routeToSellrecord()">查看详情 ></a>
        </a-descriptions-item>
        <a-descriptions-item label="赠送记录" :span="3">
          <a @click="routeToPresent()">查看详情 ></a>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>

<script>
import {
  getMemberUsingGET,
  updateMemberUsingPOST,
} from '@/api/api/huiyuanguanli.ts'
import CreateForm from './CreateForm'
import { formatDate } from '@/utils/formatDate1'
export default {
  name: 'MemberListDetail',
  components: {
    CreateForm,
  },
  data() {
    return {
      mdl: null,
      age: 0,
      visible: false,
      confirmLoading: false,
      markMdl: null,
      markVisible: false,
      markConfirmLoading: false,
      queryParam: {},
      advanced: false,
      columns: [
        {
          title: '日期',
          dataIndex: 'date',
        },
        {
          title: '收支类型',
          dataIndex: 'type',
        },
        {
          title: '细目',
          dataIndex: '上期结余',
        },
        {
          title: '金额(元)',
          dataIndex: 'price',
        },
        {
          title: '余额(元)',
          dataIndex: 'price2',
        },
        {
          title: '记账人',
          dataIndex: 'user',
        },
        {
          title: '归属店',
          dataIndex: 'shop',
        },
        {
          title: '备注',
          dataIndex: 'remark',
        },
      ],
      info: {},
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getAge(idCard) {
      if (idCard) {
        const birthday = idCard.substr(6, 8)
        const year = birthday.substr(0, 4)
        const month = birthday.substr(4, 2)
        const day = birthday.substr(6, 2)
        const now = new Date()
        const age = now.getFullYear() - year - 1
        if (now.getMonth() + 1 > month || now.getMonth() + 1 === month || now.getDate() >= day) {
          return age + 1
        }
        return age
      } else {
        return '无'
      }
    },
    betBirthAge(timestamp) {
      if (timestamp) {
        var r = formatDate(new Date(timestamp)).match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/)
        if (r == null) return false
        var d = new Date(r[1], r[3] - 1, r[4])
        if (d.getFullYear() == r[1] && d.getMonth() + 1 == r[3] && d.getDate() == r[4]) {
          var Y = new Date().getFullYear()
          return Y - r[1]
        }
        return '输入的日期格式错误！'
      }else{
        return '无'
      }
    },
    getIDcardBirth(idCard) {
      if (idCard) {
        const birthday = idCard.substr(6, 8)
        const month = birthday.substr(4, 2)
        const day = birthday.substr(6, 2)
        return month + '月' + day + '日'
      } else {
        return '无'
      }
    },
    getBirth(timestamp) {
      if (timestamp) {
        const time = new Date(timestamp)
        const month = (time.getMonth() + 1).toString().padStart(2, '0')
        const date = time.getDate().toString().padStart(2, '0')
        return month + '月' + date + '日'
      }else{
        return '无'
      }
    },
    handleChange() {
      const that = this
      that.$confirm({
        title: '切换',
        content: '你确定要切换账户状态吗？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          updateMemberUsingPOST({ id: that.info.id, activeStatus: that.info.activeStatus == 1 ? 0 : 1 })
            .then(() => {
              that.$message.success('操作成功')
              that.getDetail()
              that.visible = false
            })
            .catch((error) => {
              that.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        },
      })
    },
    getDetail() {
      getMemberUsingGET({ id: this.$route.params.id })
        .then((res) => {
          this.info = res.data
        })
        .catch(() => {
          this.$message.error('获取详情失败,请联系管理员')
        })
    },
    handleEdit(info) {
      this.mdl = { ...info }
      this.visible = true
    },
    handleOk() {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          updateMemberUsingPOST({...values }).then(() => {
              this.getDetail()
              this.$message.success('操作成功')
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
            })
            .catch((error) => {
              console.log(error)
              this.confirmLoading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handlePrepayment(info){
      this.$router.push({ path: `/member/list/${this.$route.params.id}/payment` })
    },
    handleMark(info) {
      this.$router.push({ path: `/member/list/markForm/${info.id}`,query:{name:info.name} })
    },
    routeToIntegral() {
      this.$router.push({ path: `/member/list/${this.$route.params.id}/integral` })
    },
    routeToFollow() {
      this.$router.push({ path: `/member/list/${this.$route.params.id}/follow` })
    },
    routeToTodo() {
      this.$router.push({ path: `/member/list/${this.$route.params.id}/todo` })
    },
    routeToSellrecord() {
      this.$router.push({ path: `/member/list/${this.$route.params.id}/sellrecord` })
    },
    routeToPresent() {
      this.$router.push({ path: `/member/list/${this.$route.params.id}/present` })
    },
  },
}
</script>
